<template>
    <ui-main title="下拉树">
        <div class="item one">
            <table class="ui celled striped table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>组件</th>
                        <th>输出值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="collapsing">
                            单选下拉树
                        </td>
                        <td width="40%">
                            <ui-dropdown-tree size="mini" :model-id.sync="modelId" :model-label.sync="modelLabel"
                                :model-custom.sync="modelCustom" :treeData="treeData" placeholder="单选下拉树" custom="name"
                                @change="callback" collapse-all style="width:150px;">
                                <template slot-scope="scope">
                                    <div :class="scope.selected ? 't-blue' : ''">
                                        <span class="fl-l">{{scope.node.label}}</span>
                                        <el-tag class="fl-r" v-if="scope.node.que" size="mini" type="danger">缺</el-tag>
                                    </div>
                                </template>
                            </ui-dropdown-tree>
                        </td>
                        <td>
                            ID:{{ modelId }} <br> LABEL:{{ modelLabel }} <br> CUSTOM:{{ modelCustom }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            多选下拉树
                        </td>
                        <td>
                            <ui-dropdown-tree multiple :model-id.sync="val2.id" :model-label.sync="val2.label"
                                :model-custom.sync="val2.custom" :treeData="treeData" custom="label" check-strictly
                                @change="callback" tag-equal placeholder="多选下拉树">
                                  <template slot-scope="scope">
                                    <div>
                                        <span class="fl-l">{{scope.node.label}}</span>
                                        <el-tag class="fl-r" v-if="scope.node.que" size="mini" type="danger">缺</el-tag>
                                    </div>
                                </template>
                            </ui-dropdown-tree>
                        </td>
                        <td>
                            <div>ID:{{ val2.id }} <br> LABEL:{{ val2.label }} <br> CUSTOM:{{ val2.custom }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            多选懒加载下拉树
                        </td>
                        <td>
                            <ui-dropdown-tree multiple lazy :lazy-load="loadNode" :model-id.sync="val3.id"
                                :model-label.sync="val3.label" :model-custom.sync="val3.custom" custom="label"
                                check-strictly @change="callback" tag-equal placeholder="多选懒加载下拉树"></ui-dropdown-tree>
                        </td>
                        <td>
                            <div>ID:{{ val3.id }} <br> LABEL:{{ val3.label }} <br> CUSTOM:{{ val3.custom }}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="item three">
            <ui-load-md file="ui-dropdown-tree"></ui-load-md>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                val: {},
                val2: {
                    id: '6,8',
                    label: '',
                    custom: ''
                },
                val3: {
                    id: '',
                    label: '',
                    custom: ''
                },
                modelId: '3-3-1',
                modelLabel: '',
                modelCustom: '',
                treeData: [],
                count: 1
            }
        },
        mounted() {
            setTimeout(() => {
                this.treeData = [{
                        'id': 1,
                        'label': '一级 1',
                        'can_select': 0,
                        'que': true,
                        'children': [{
                            'id': 4,
                            'label': '二级 1-1',
                            'can_select': 0,
                            'children': [{
                                    'id': 9,
                                    'can_select': 0,
                                    'que': true,
                                    'label': '驴子 1-1-1',
                                    'pinyin_code': 'lv',
                                    name: {
                                        xxx: 'xxx'
                                    }
                                },
                                {
                                    'id': 10,
                                    'can_select': 0,
                                    'label': '三级 1-1-2',
                                    'pinyin_code': '0'
                                }
                            ]
                        }]
                    },
                    {
                        'id': 2,
                        'label': '一级 2',
                        'children': [{
                                'id': 5,
                                'label': '二级 2-1'
                            },
                            {
                                'id': 6,
                                'label': '二级 2-2',
                                'disabled': 'true'
                            }
                        ]
                    },
                    {
                        'id': '3-3',
                        'label': '一级 3',
                        'children': [{
                                'id': '3-3-1',
                                'label': '二级 3-1'
                            },
                            {
                                'id': 8,
                                'label': '二级 3-2'
                            }
                        ]
                    }
                ]
            }, 1000)
            setTimeout(() => {
                this.modelId = '9'
                this.val2.id = '9,5'
            }, 2000)
            setTimeout(() => {
                this.modelId = ''
                this.val2.id = ''
            }, 3000)

        },
        watch: {},
        methods: {
            callback(v) {
                this.log('cb:', v)
            },
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve([{
                        label: 'region1',
                        id: 1
                    }, {
                        label: 'region2',
                        id: 2
                    }]);
                }
                if (node.level > 3) return resolve([]);

                let hasChild;
                if (node.data.label === 'region1') {
                    hasChild = true;
                } else if (node.data.label === 'region2') {
                    hasChild = false;
                } else {
                    hasChild = Math.random() > 0.5;
                }

                setTimeout(() => {
                    let data;
                    if (hasChild) {
                        data = [{
                            label: 'zone' + this.count++,
                            id: 'ChildId' + this.count++
                        }, {
                            label: 'zone' + this.count++,
                            id: 'ChildId' + this.count++
                        }];
                    } else {
                        data = [];
                    }

                    resolve(data);
                }, 700);
            }
        }
    }

</script>
